<script setup lang="ts">
import * as echarts from 'echarts'
import {onMounted, ref} from 'vue'
import {ECharts, EChartsOption} from "echarts";
import {getAqiDistributionStatisticsApi} from "@/api/chartApis.ts";

const aqiDistribution = ref()

/**
 * 初始化图表数据。
 * @param {any} chartDom - ECharts图表实例的DOM元素。
 * @async
 */
const initData = async (chartDom : any) => {
  let res = await getAqiDistributionStatisticsApi()
  let xData: Array<string> = []
  let pieData: Array<any> = []
  xData = ['优', '良', '轻度', '中度', '重度', '严重']
  if (res?.data.code == 200){
    for (let i = 0; i < res.data.data.length; i++){
      pieData.push({value: res.data.data[i], name: xData[i]})
    }
  }

  let option: EChartsOption;
  option = {
    title: {
      text: '空气质量指数级别分布',
      left: 'center',
      textStyle: {
        color: '#ffffff', // 这里设置标题的字体颜色
        fontSize: 12
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'bottom',
      textStyle: {
        fontSize: 10,
        color: '#ffffff' // 这里设置图例的字体颜色
      }
    },
    series: [
      {
        name: '空气质量',
        type: 'pie',
        radius: '50%',
        data: pieData,
        label: {
          show: true,
          color: '#ffffff', // 这里设置标签的字体颜色
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  chartDom.setOption(option)
}



onMounted(()=>{
  let chartDom = echarts.init(aqiDistribution.value)
  initData(chartDom)
})

</script>

<template>
  <div ref="aqiDistribution" style="width: 100%; height: 30%"></div>
</template>

<style scoped>

</style>
